<html>
<head>
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

	<title>Welcome to FunFinder!</title>

	<link rel="stylesheet" href="css-dan/upper_viewtogglebar_draft.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
	<link rel="stylesheet" href="css-dan/upper_sortingBar.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
	<link rel="stylesheet" href="css-dan/lower_navbar_draft.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
	<link rel="stylesheet" href="css-dan/r_eventlist.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
	<link rel="stylesheet" href="css-dan/mapPane.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
	<link rel="stylesheet" href="css-dan/dan_main_week2.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
	<link rel="stylesheet" href="css-dan/event-description-VIEW.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
	<link rel="stylesheet" href="css-dan/eventRangeBar.css" type="text/css" media="screen" title="no title" charset="utf-8"/>


<!--        <link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch_shre.css"> -->
        <link type="text/css" rel="stylesheet" media="screen" href="themes/apple/theme_shre.css"> 


	<link rel="apple-touch-icon" href="icons-dan/apple-touch-icon.png" />

<!--	<link type="text/css" rel="stylesheet" media="screen" href="../Shre_Settings_week2/jqtouch/jqtouch.css"> -->
<!-- 	<link type="text/css" rel="stylesheet" media="screen" href="../Shre_Settings_week2/themes/apple/theme.css"> -->
 	
	<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAZs3OaBh-5aYk6Q1zUcNL6BRjvD8jcpqQzirtpLcZofJRG2oUnBRsGBU2dYtNprUJLXrq4RIsNthzuQ" ></script>
	<script type="text/javascript">	google.load("jquery", '1.3'); google.load("maps", "2.x"); </script>
	<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="viewChangeScripts.js" type="text/javascript" charset="utf-8"></script>
	<script src="eventDescriptionViewScripts.js" type="text/javascript" charset="utf-8"></script>
	<script src="eventRangeBarScripts.js" type="text/javascript" charset="utf-8"></script>
	<script src="db.js" type="text/javascript" charset="utf-8"></script>
	<script src="sortingScripts.js" type="text/javascript" charset="utf-8"></script>
	<script src="settingsScripts.js" type="text/javascript" charset="utf-8"></script>
	<script src="iscroll.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript" charset="utf-8">
		

//-------------- Global variables ---------------------------------------------------------------------

		// Keeps track of current time interval- possibly outdated?
		var currentInterval = 30;

		// Starts displaying events starting with event 1
		var currentEventRangeIndex = 1;

		// A GLatLang object of the current location, and actual variables for that lat and long
		var currentLocation;
		var currentLat; 
		var currentLon;  

		// Initializing the current time to a fixed time
		var currentTime = new Date();
		currentTime.setHours(14, 15);

		// Keep track of the selected event location for distance calculation, and the index of the event (in markerData)
		var selectedEventLat;
		var selectedEventLon;
		var currentEventIndex;

		// A huge multidinensional array containing all the data for all the events
		var markerData;

		

		// Used for tracking the user's settings in the category settings page
		var c_value_main; 
		var s_value = "Academics~Business~Dance~Music & The Arts~Athletics~Cultural~Party & Social";

		var preferences;

		// Map and view related global variables
		var map;
		var currentZoom = 15;
		var currentView = 1; // 1 = splitscreen, 2 = map, 3 = list

		var numEvents;
		var numCategories = 7;

		

//------------- Map initilization functions ---------------------------------------------------------------

		function getPosition() {	
			function handlePosition(position) {
				currentLocation = new GLatLng(position.coords.latitude, position.coords.longitude);
				loadPreferences();
				makeMap();
			}
			navigator.geolocation.getCurrentPosition(handlePosition);
		}



		function importCategoryStates() {
			c_value_main = s_value.split("~");
		}


		function makeMap() {
			importCategoryStates();

			map = new GMap2($("#map").get(0));
			map.setCenter(currentLocation, currentZoom);

			var blueIcon = new GIcon(G_DEFAULT_ICON);
			blueIcon.image = "blue-dot-edited.png";
			markerOptions = { icon:blueIcon };
			currentLocationMarker = new GMarker(currentLocation, markerOptions);
			map.addOverlay(currentLocationMarker);

			currentLat = currentLocation.lat();
			currentLon = currentLocation.lng();

			loadMarkerData();
			markerData.sort(sortByPreference);
			
			populateWithEvents();
			sortByRecommended_wrapper();			
		}


		function populateWithEvents() {
			map = new GMap2($("#map").get(0));

			map.setCenter(currentLocation, currentZoom);
			var blueIcon = new GIcon(G_DEFAULT_ICON);
			blueIcon.image = "blue-dot-edited.png";
			markerOptions = { icon:blueIcon };
			currentLocationMarker = new GMarker(currentLocation, markerOptions);
			map.addOverlay(currentLocationMarker);	

			assignMarkerRanks();
			var markers = createMarkers();

			for (var j = 0; j < markers.length; j++) {
				if ( displayingThisEventIsLegal(j) ) {
					map.addOverlay(markers[j]); 
				}
			}
			addClickability(markers);
			resizeScroller();
		}


		function assignMarkerRanks() {
			var rank = 0;
			for (var i = 0; i < markerData.length; i++) {
				if ( eventCategoryIsOn(i) ) {
					markerData[i][9] = rank;
					rank = (rank + 1);
					numEvents = rank;
				}
				else {
					markerData[i][9] = -1;
				}
			}
		}


		function displayingThisEventIsLegal(i) {
			if ( (markerData[i][9] < (currentEventRangeIndex-1)) || (markerData[i][9] >= (currentEventRangeIndex+9)) ) {

				return false;
			}
			if( !categoryIsOn(markerData[i][3]) ) { 
				return false;
			} 
			return true;
		}


		function eventIsInEventRange(i) {
			if ( (markerData[i][9] < (currentEventRangeIndex-1)) || (markerData[i][9] >= (currentEventRangeIndex+9)) ) {

				return false;
			}
			return true;
		}

		function eventCategoryIsOn(i) {
			if( !categoryIsOn(markerData[i][3]) ) { 
				return false;
			} 
			return true;
		}



		
		function categoryIsOn(marker_category) {
			for(var i = 0; i < c_value_main.length; i++) {
				if(c_value_main[i] == marker_category) {
					return true;
				}
  			} 
			return false;
		}


		function createMarkers() {
			var markers = [];
			for (var i = 0; i < markerData.length; i++) {
				
			   	var point = new GLatLng(markerData[i][0], markerData[i][1]);
				
					var blueIcon = new GIcon(G_DEFAULT_ICON);
					blueIcon.image = "http://maps.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";

					var letter = String.fromCharCode("A".charCodeAt(0) + markerData[i][9] - currentEventRangeIndex + 1);
					
					blueIcon.image = "http://maps.google.com/mapfiles/marker" + letter + ".png";
					markerOptions = { icon:blueIcon };

					marker = new GMarker(point, markerOptions);
					markers[i] = marker;
				
			} 
			return markers;
		} 



	
		function addClickability(markers) {
			var ulToBeCleared = document.getElementById('list');
			while(ulToBeCleared.firstChild) ulToBeCleared.removeChild(ulToBeCleared.firstChild);

			$(markers).each(function(i,marker){
				if (displayingThisEventIsLegal(i) && markerData[i][9] != -1) {

					var markerDescription = "null";
					markerDescription = "<font color=\"blue\">" +			
					"<b>" +
					( "("+String.fromCharCode("A".charCodeAt(0) + markerData[i][9] + 1 - currentEventRangeIndex) + ") " + markerData[i][2] 
					+ "</b>"
					+ "<br>" + printTime(markerData[i][5]) + " - " + printTime(markerData[i][6]) + " at " + markerData[i][7] )
					+ "<br>Event Category: " + markerData[i][3]
					+ "<br>Host: " + markerData[i][4];
					$("<li></li>")
						.html(markerDescription)
						.click(function(){ displayPoint(marker, i); })
						.appendTo("#list");
						GEvent.addListener(marker, "click", function(){ displayPoint(marker, i); });

				}
				
			});


			function displayPoint(marker, index){
				map.panTo(marker.getLatLng());
				var eventName = markerData[index][2];

				selectedEventLat = markerData[index][0];
				selectedEventLon = markerData[index][1];
				
				// Save current zoom setting
				currentZoom = map.getZoom();
				// Show event description
				showEventDescription(index, eventName);
				currentEventIndex = index;
			}
			
		}

		function recenterMap(event) {
			map.setCenter(currentLocation, currentZoom);
			map.setCenter(currentLocation, currentZoom);
		}


		function resizeScroller() {
			var scrollerHeight = (140 * (document.getElementById('list').getElementsByTagName('li').length));
			$('#wrapper').css({"height": "300"});
			$('#scroller').css({"height": scrollerHeight});
			myScroll.refresh();
			myScroll.scrollTo(0, '500ms');
		}

			


//------------- Button-initialization and response definition --------------------------------------------

$(document).ready(init);
function init() {		
	var el = $('#soonestButton');
	el.click(sortByTime_wrapper);

	var el1 = $('#closestButton');
	el1.click(sortByDistance_wrapper);

	var el2 = $('#recommendedButton');
	el2.click(sortByRecommended_wrapper);


	var el3 = $('#maponly_button');
	el3.click(showMapOnly);
	var el4 = $('#listonly_button');
	el4.click(showListOnly);
	var el5 = $('#splitscreen_button');
	el5.click(showSplitScreen);

	var el6 = $('#eventDescription_backButton');
	el6.click(goBackToMainScreen);
	var el7 = $('#eventDescription_directionsButton');
	el7.click(goToDirectionsScreen);

	var el10 = $('#preference_likeButton');
	el10.click(acceptPositiveFeedback);
	var el11 = $('#preference_dislikeButton');
	el11.click(acceptNegativeFeedback);

	var el12 = $('#increaseEventRangeButton');
	el12.click(increaseEventRange);

	var el13 = $('#decreaseEventRangeButton');
	el13.click(decreaseEventRange);
	
	var el14 = $('#settings_button');
	el14.click(openSettingsPage);

	var el15 = $('#settings_BACKButton');
	el15.click(openMainPage);

	var el16 = $('#recenterButton');
	el16.click(recenterMap);

	var el17 = $('#preference_helpButton');
	el17.click(showPreferenceHelp);

}




//------------- Main-screen and settings-screen switching functions -----------------------------------------


function openSettingsPage(event) {
	set_check_value(document.myform.check_list);
	$('#settings').css({ "display": "block", "visibility": "visible" });
	$('#main').css({ "display": "none"});
}

function openMainPage(event) {
	$('#main').css({ "display": "block", "visibility": "visible" });
	$('#settings').css({ "display": "none"});
	importCategoryStates();
	importCategoryStates();
	assignMarkerRanks();
	populateWithEvents();
	upDateEventRange(-99999);
}


//------------- Settings-screen check-box operation functions -----------------------------------------


function get_check_value(chk)
	{
		s_value = "";
		for (i=0; i < numCategories; i++)
  		{
   			if (chk[i].checked == true)
      			{
      				s_value = s_value + chk[i].value + "~";
      			}
   		}
		
	}

function set_check_value(chk)
	{	
		var c_value = s_value.split("~");		
				
		for(i = 0; i< c_value.length; i++)
		{
			for (j = 0; j< chk.length; j++)
			{
				if( chk[j].value == c_value[i]){
					chk[j].checked = true; }
			}
		}
		
	}


//------------- Window onload functions wrapper ---------------------------------------------------------

var myScroll;

function onloadScripts() {
	getPosition();
	myScroll = new iScroll(document.getElementById('scroller'));
}

	</script>



<script type="text/javascript">

touchMove = function(event) {

// Prevent scrolling on this element

event.preventDefault();

}

</script>



</head>
<body onload='onloadScripts()' >

<!-- ------------- HTML for main screen (not the settings screen) -------------------------------------------- -->

<div id="main">



<div class="eventDescription_nametoolbar eventDescription_toolbars">
	<div id="eventnamelabel"></div>
</div>

<div class="eventDescription_uppernavbar eventDescription_toolbars">
	<div id="eventDescription_backButton" 
	class="eventDescription_navbutton buttonleft">Back</div>
	<div id="eventDescription_directionsButton" 
	class="eventDescription_navbutton button">Get Google Directions</div>
</div>



<div class="viewtogglebar_container">
	<div id="maponly_button" class="viewtoggle">
	MAP VIEW
	</div>
	<div class="viewToggleDiv"></div>
	<div id="splitscreen_button" class="viewtoggle">
	SPLIT-SCREEN
	</div>
	<div class="viewToggleDiv"></div>
	<div id="listonly_button" class="viewtoggle">
	LIST VIEW
	</div>
</div>




<div class="sortingBar_container">
	<div id="closestButton"
	class="sortingBarObject sortingButton button">Closest</div>
	
	<div id="soonestButton"
	class="sortingBarObject sortingButton button">Soonest</div>

	<div id="recommendedButton"
	class="sortingBarObject sortingButton button">Recommended</div>
	
	<div id="sortingBarLabel"
	class="sortingBarObject">Sort Events By:</div>
</div>





<div id="splitscreenview" class="content">
	<div class="mapcontainer">
		<div id="map"></div>
		<div id="recenterButton" class="">RECENTER MAP ON<br>CURRENT LOCATION</div>
<!--		<div id="message" style="display:none;">test text</div> -->
	</div>
	<div class="eventlist">
		



<div id="preferenceToolbar" class="eventListToolbar">

<div id="preference_label" 
class="eventDescription_preferenceObjects">Give feedback:</div>

<div class="preferenceButtonWrapper">
<div id="preference_likeButton"
class="eventDescription_preferenceObjects preferenceButton">
</div>
</div>

<div class="preferenceButtonWrapper">
<div id="preference_dislikeButton" 
class="eventDescription_preferenceObjects preferenceButton">
</div>
</div>

<div id="preference_helpButton" class="preferenceButtonWrapper"">?</div>

<br><br><br>Your feedback helps FunFinder intelligently list events based on your opinions.  
View this personalized event sorting by selecting the "Recommended" option in the sorting toolbar on the home screen.
</div>

<!-- ID used to be list! -->
		<div id="expandedDescription"></div>
		<div id="wrapper">
			
			<div id="scroller">
			<u>
			<ul id="list" class="eventlist"></ul>
			</u>
			

			</div>
		</div>

		
		
	</div>
</div>




<div class="eventRangeBar_container">

	<div id="decreaseEventRangeButton"
	class="eventRangeBar_object eventRangeBar_button button">Prev.<br>10</div>

	<span id="eventRange"
	class="eventRangeBar_object">Showing Events<br></span>

	<div id="increaseEventRangeButton"
	class=" eventRangeBar_object eventRangeBar_button button">Next<br>10</div>

	<div id="settings_buttonWrapper" class="button blueButton">
	<div id="settings_button">
	PREFERENCES
	</div>
	</div>
</div>







</div>


<!-- ------------- HTML for SETTINGS screen (not the main event viewing screen) -------------------------------------------- -->

<div id="settings">


<div id="home" ontouchmove="touchMove(event);">


            <div class="toolbar categoriesHeader">
                <h1>Categories</h1>
                <div id="settings_BACKButton" class="buttonleft categoriesButton" >   Back</div>
            </div>
	    <form name="myform" method="get" action="#" id="myform">
		<div class="toolbar categoriesToolbar">
			<input type="button" class=" button cancel categoriesButton2" name="Check_All" value="Check All" onClick="CheckAll(document.myform.check_list)">
			<input type="button" class="button categoriesButton2" name="Un_CheckAll" value="Uncheck All" onClick="UnCheckAll(document.myform.check_list)">
		</div>
	   	
   
            <ul class="settingsUl">
                
		
		<li class="arrow settingsLi"> 
			 
				<span class = "toggle">
				<input type="checkbox" name ="check_list"  value="Academics" onClick="get_check_value(document.myform.check_list)"/>
				</span> 
				
				<a href="#academics">
				<span style="padding-left:114px">
				Academics 
				</span>
			</a> 
		</li>
                <li class="arrow settingsLi"> 
			<a href="#athletics"> 
				<span class = "toggle">
				<input type="checkbox" name ="check_list"  value="Athletics" onClick="get_check_value(document.myform.check_list)" /> 
				</span> 
				<span style="padding-left:20px">
				Athletics 
				</span>
			</a>
		</li>
		<li class="arrow settingsLi">
			<a href="#business">
				<span class = "toggle">
				<input type="checkbox" name ="check_list"  value="Business" onClick="get_check_value(document.myform.check_list)" /> 
				</span> 
				<span style="padding-left:20px">
				Business
				</span>
			</a>
		</li>
		<li class="arrow settingsLi">
			<a href="#cultural">
				<span class = "toggle">
				<input type="checkbox" name ="check_list"  value="Cultural" onClick="get_check_value(document.myform.check_list)" /> 
				</span> 
				<span style="padding-left:20px">
				Cultural
				</span>
			</a>
		</li>
		<li class="arrow settingsLi">
			<a href="#dance">
				<span class = "toggle">
				<input type="checkbox" name ="check_list"  value="Dance" onClick="get_check_value(document.myform.check_list)" /> 
				</span> 
				<span style="padding-left:20px">
				Dance
				</span>
			</a>
		</li>
		
		<li class="arrow settingsLi">
			<a href="#music">
				<span class = "toggle">
				<input type="checkbox" name ="check_list"  value="Music & The Arts" onClick="get_check_value(document.myform.check_list)" /> 
				</span> 
				<span style="padding-left:20px">
				Music & The Arts
				</span>
			</a>
		</li>
		<li class="arrow settingsLi">
			<a href="#party">
				<span class = "toggle">
				<input type="checkbox" name ="check_list"  value="Party & Social" onClick="get_check_value(document.myform.check_list)" /> 
				</span> 
				<span style="padding-left:20px">
				Party & Social
				</span>
			</a>
		</li>
		
            </ul>
	
	
        </form>




        <div id="academics" class="categoryDescriptionDiv">
            <div class="toolbar categoriesHeader">
                <h1>Academics</h1>
                <a class="buttonleft categoriesButton" href="#">Back</a>
            </div>
            <ul class="edgetoedge settingsUl">
                <li>Drawn from the Academics calandar on the ASSU students page.</li>
            </ul>
        </div>




        <div id="athletics" class="categoryDescriptionDiv">
            <div class="toolbar categoriesHeader">
                <h1>Athletics</h1>
                <a class="buttonleft categoriesButton" href="#">Back</a>
            </div>
            <ul class="edgetoedge settingsUl">
                <li>Drawn from the Stanford Athletics calandar on the ASSU students page.</li>
            </ul>
        </div>


        <div id="business" class="categoryDescriptionDiv">
            <div class="toolbar categoriesHeader">
                <h1>Business</h1>
                <a class="buttonleft categoriesButton" href="#">Back</a>
            </div>
            <ul class="edgetoedge settingsUl">
                <li>Events drawn from business groups across campus.</li>
            </ul>
        </div>


	<div id="cultural" class="categoryDescriptionDiv">
            <div class="toolbar categoriesHeader">
                <h1>Cultural</h1>
                <a class="buttonleft categoriesButton" href="#">Back</a>
            </div>
            <ul class="edgetoedge settingsUl">
                <li>Events drawn from various cultural student groups across campus. </li>
            </ul>
        </div>

	<div id="dance" class="categoryDescriptionDiv">
            <div class="toolbar categoriesHeader">
                <h1>Dance</h1>
                <a class="buttonleft categoriesButton" href="#">Back</a>
            </div>
            <ul class="edgetoedge settingsUl">
                <li>Events drawn from dance groups across campus. </li>
            </ul>
        </div>

	
	<div id="music" class="categoryDescriptionDiv">
            <div class="toolbar categoriesHeader">
                <h1>Music & The Arts</h1>
                <a class="buttonleft categoriesButton" href="#">Back</a>
            </div>
            <ul class="edgetoedge settingsUl">
                <li>Events drawn from music groups across campus. </li>
            </ul>
        </div>
	<div id="party" class="categoryDescriptionDiv">
            <div class="toolbar categoriesHeader">
                <h1>Party & Social</h1>
                <a class="buttonleft categoriesButton" href="#">Back</a>
            </div>
            <ul class="edgetoedge settingsUl">
                <li>Events drawn from campus wide social events. </li>
            </ul>
        </div>




</div>



</body>

</html>
